let CustomOverlay
function getCustomOverlay() {
  if (CustomOverlay) {
    return CustomOverlay
  }
  if (window.BMapGL?.Overlay) {
    let Overlay = window.BMapGL?.Overlay
    CustomOverlay = function (
      point,
      text,
      item,
      clickCallback,
      className,
      mouseoverColor,
      mouseoutColor
    ) {
      this._point = point
      this._length = 80
      this._text = text
      this._item = item
      this._clickCallback = clickCallback
      this.mouseoutColor = mouseoutColor
      this.mouseoverColor = mouseoverColor
      if (className) {
        this._className = className
      }
    }

    CustomOverlay.prototype = new Overlay()

    CustomOverlay.prototype.initialize = function (map) {
      this._map = map
      let div = document.createElement('div')
      if (this._className) {
        div.className = this._className
      } else {
        div.className = 'circleOverlay'
      }
      div.title =
        this._text +
        '（电站数：' +
        this._item.stationNum +
        '，插口数：' +
        this._item.plugNum +
        ')'
      div.innerHTML =
        "<div class='pointOverlayTop'>" +
        this._text +
        "</div><div class='circleOverlayBottom'><p>" +
        this._item.stationNum +
        '</p><p>' +
        this._item.plugNum +
        '</p></div>'
      // div.html("<div class='circleOverlayTop'>" + this._text + "</div><div class='circleOverlayBottom'><p>" + this._item.stationNum + "</p><p>" + this._item.plugNum + "</p></div>")
      // div.click(function() {
      //     if (this._zoom == "province") {
      //         isMove = false;
      //         map.centerAndZoom(this._text, 9);
      //     } else if (this._zoom == "city") {
      //         isMove = false;
      //         map.centerAndZoom(this._text, 11);
      //     }

      // }.bind(this))

      // div.click(function(){
      //   console.log('click overlay')
      // })
      div.addEventListener('click', () => {
        this._clickCallback(this._text)
      })
      div.addEventListener('mouseout', () => {
        div.style.zIndex = '1'
        div.style.backgroundColor = this.mouseoutColor
          ? this.mouseoutColor
          : '#649C00'
      })
      div.addEventListener('mouseover', () => {
        div.style.backgroundColor = this.mouseoverColor
          ? this.mouseoverColor
          : 'orange'
        div.style.zIndex = '9999'
      })
      map.getPanes().markerPane.append(div)
      this._div = div
      return div
    }
    CustomOverlay.prototype.draw = function () {
      // 根据地理坐标转换为像素坐标，并设置给容器
      var position = this._map.pointToOverlayPixel(this._point)
      this._div.style.left = position.x - this._length / 2 + 'px'
      this._div.style.top = position.y - this._length / 2 + 'px'
    }

    CustomOverlay.prototype.show = function () {
      if (this._div) {
        this._div.style.display = ''
      }
    }
    CustomOverlay.prototype.hide = function () {
      if (this._div) {
        this._div.style.display = 'none'
      }
    }

    return CustomOverlay
  }

  return undefined
}

export default getCustomOverlay
